import {LaptopOutlined, NotificationOutlined, UserOutlined} from '@ant-design/icons';
import {Breadcrumb, Layout, Menu,Button} from 'antd';
import React from 'react';
import './pages_css.css';
import {Link, Outlet} from 'react-router-dom'
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space } from 'antd';
import MyTable from "../components/MyTable";

const { Search } = Input;


const onSearch = (value) => console.log(value);


const {Header, Content, Sider} = Layout;
// const items1 = ['1', '2', '3'].map((key) => ({
//     key,
//     label: `nav ${key}`,
// }));
// const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
//     const key = String(index + 1);
//     return {
//         key: `sub${key}`,
//         icon: React.createElement(icon),
//         label: `subnav ${key}`,
//         children: new Array(4).fill(null).map((_, j) => {
//             const subKey = index * 4 + j + 1;
//             return {
//                 key: subKey,
//                 label: `option${subKey}`,
//             };
//         }),
//     };
// });



const App = () => (
    <Layout>
        {/*<Header className="header">*/}
        {/*    <div className="logo"/>*/}
        {/*    <h1 style={{color:"white",fontSize:"35px",fontWeight:"500"}}>天健知识库</h1>*/}
        {/*    /!*<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1}/>*!/*/}
        {/*    <Search*/}
        {/*        placeholder="input search text"*/}
        {/*        allowClear*/}
        {/*        enterButton="搜索"*/}
        {/*        size="large"*/}
        {/*        onSearch={onSearch}*/}
        {/*    />*/}
        {/*</Header>*/}
        <Header className="header" style={{padding: '0 0px'}}>

            <div className="logo"/>
            <Menu theme="dark" mode="horizontal" style={{width: "100%"}}
            >
                <Menu.Item key="0" style={{fontSize: '28px', left: '10px',color: 'black'}}>
                    天健知识库
                </Menu.Item> 
                {/*<Menu.Item style={{ position:"absolute",*/}
                {/*   left:'220px',}}>*/}
                <div style={{marginLeft: '35px'}}>
                    <Button>自定义标签</Button>
                    <Button style={{margin: '5px'}}>知识库管理</Button>
                    <Button><Link to='Editor'>发布</Link></Button>
                </div>
                {/*</Menu.Item>*/}
                <Search
                    id={'search'}
                    placeholder="综合查询：请输入搜索内容……"
                    allowClear
                    enterButton="搜索"
                    size="large"

                    style={{
                        // margin: "10px 0"
                        width: "380px",
                        position: "absolute",
                        right: '20px',
                        top: "10px"
                        // float:"right"

                    }}
                />
            </Menu>

        </Header>
        <Layout>
            {/*<Sider width={200} className="site-layout-background">*/}
            {/*    <Menu*/}
            {/*        mode="inline"*/}
            {/*        defaultSelectedKeys={['1']}*/}
            {/*        defaultOpenKeys={['sub1']}*/}
            {/*        style={{*/}
            {/*            height: '100%',*/}
            {/*            borderRight: 0,*/}
            {/*        }}*/}
            {/*        items={items2}*/}
            {/*    />*/}

            {/*</Sider>*/}
            <Sider width={200} className="site-layout-background">
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{
                        height: '100%',
                        borderRight: 0,
                    }}
                    // items={items2}
                >
                    <Menu.Item key={1}>
                        <Link to='/'>
                            天健知识库
                        </Link>

                    </Menu.Item>
                    <Menu.Item key={2}>
                        <Link to='/'>
                            我的知识库
                        </Link>

                    </Menu.Item>

                    <Menu.Item key={3}>
                        <Link to='/co'>
                            我的收藏</Link>
                    </Menu.Item> <Menu.Item key={4}>
                        <Link to='/MyHistory'>
                            浏览历史</Link>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout
                style={{
                    padding: '0 24px 24px',
                }}
            >

                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 280,
                    }}
                >
                    {/*todo 2 导航条上的按钮标签里加link标签*/}


                    {/*todo 3 点击link后被包裹在route标签内的页面会在outlet标签内显示*/}
                    <Outlet></Outlet>

                {/*<MyTable/>*/}
                </Content>
            </Layout>
        </Layout>
    </Layout>
);

export default App;